การปรับปรุงประสิทธิภาพ React Context: รูปแบบ Selector และประสิทธิภาพ

React Context มอบกลไกที่มีประสิทธิภาพสำหรับการจัดการสถานะของแอปพลิเคชันและการแชร์สถานะข้ามคอมโพเนนต์โดยไม่จำเป็นต้องส่ง props ลงไป (prop drilling) อย่างไรก็ตาม การใช้งาน Context แบบง่ายๆ อาจนำไปสู่ปัญหาคอขวดด้านประสิทธิภาพ โดยเฉพาะอย่างยิ่งในแอปพลิเคชันขนาดใหญ่และซับซ้อน ทุกครั้งที่ค่า Context เปลี่ยนแปลง คอมโพเนนต์ทั้งหมดที่ใช้ Context นั้นจะ re-render แม้ว่าคอมโพเนนต์เหล่านั้นจะขึ้นอยู่กับข้อมูลเพียงเล็กน้อยก็ตาม

บทความนี้จะเจาะลึกถึงรูปแบบ selector ในฐานะกลยุทธ์สำหรับการปรับปรุงประสิทธิภาพ React Context เราจะสำรวจวิธีการทำงาน ประโยชน์ของมัน และให้ตัวอย่างเชิงปฏิบัติเพื่อแสดงให้เห็นถึงการใช้งาน นอกจากนี้เราจะกล่าวถึงข้อควรพิจารณาด้านประสิทธิภาพที่เกี่ยวข้องและเทคนิคการปรับปรุงประสิทธิภาพทางเลือกอื่นๆ

ทำความเข้าใจปัญหา: การ Re-render ที่ไม่จำเป็น

ปัญหาหลักเกิดขึ้นจากข้อเท็จจริงที่ว่า React's Context API โดยค่าเริ่มต้น จะทริกเกอร์การ re-render ของคอมโพเนนต์ที่ใช้ทั้งหมดเมื่อใดก็ตามที่ค่า Context เปลี่ยนแปลง ลองพิจารณาสถานการณ์ที่ Context ของคุณเก็บอ็อบเจ็กต์ขนาดใหญ่ที่มีข้อมูลโปรไฟล์ผู้ใช้ การตั้งค่าธีม และการกำหนดค่าแอปพลิเคชัน หากคุณอัปเดตคุณสมบัติเดียวภายในโปรไฟล์ผู้ใช้ คอมโพเนนต์ทั้งหมดที่ใช้ Context จะ re-render แม้ว่าคอมโพเนนต์เหล่านั้นจะขึ้นอยู่กับการตั้งค่าธีมเท่านั้น

สิ่งนี้สามารถนำไปสู่การลดลงของประสิทธิภาพอย่างมาก โดยเฉพาะอย่างยิ่งเมื่อต้องจัดการกับลำดับชั้นของคอมโพเนนต์ที่ซับซ้อนและการอัปเดต Context บ่อยครั้ง การ re-render ที่ไม่จำเป็นจะสิ้นเปลืองรอบ CPU ที่มีค่าและอาจส่งผลให้ส่วนต่อประสานผู้ใช้ทำงานช้า

รูปแบบ Selector: การอัปเดตที่ตรงเป้าหมาย

รูปแบบ selector นำเสนอโซลูชันโดยอนุญาตให้คอมโพเนนต์สมัครรับข้อมูลเฉพาะส่วนของค่า Context ที่ต้องการเท่านั้น แทนที่จะใช้ Context ทั้งหมด คอมโพเนนต์จะใช้ฟังก์ชัน selector เพื่อดึงข้อมูลที่เกี่ยวข้อง สิ่งนี้จะลดขอบเขตของการ re-render ทำให้มั่นใจได้ว่าเฉพาะคอมโพเนนต์ที่ขึ้นอยู่กับข้อมูลที่มีการเปลี่ยนแปลงเท่านั้นที่จะได้รับการอัปเดต

วิธีการทำงาน:

1. Context Provider: Context Provider เก็บสถานะของแอปพลิเคชัน
2. ฟังก์ชัน Selector: นี่คือฟังก์ชันบริสุทธิ์ที่รับค่า Context เป็นอินพุตและส่งกลับค่าที่ได้มา พวกมันทำหน้าที่เป็นตัวกรอง ดึงข้อมูลเฉพาะส่วนออกจาก Context
3. คอมโพเนนต์ที่ใช้: คอมโพเนนต์ใช้ custom hook (มักจะชื่อ `useContextSelector`) เพื่อสมัครรับข้อมูลเอาต์พุตของฟังก์ชัน selector hook นี้มีหน้าที่ตรวจจับการเปลี่ยนแปลงในข้อมูลที่เลือกและทริกเกอร์การ re-render เฉพาะเมื่อจำเป็นเท่านั้น

การใช้งานรูปแบบ Selector

นี่คือตัวอย่างพื้นฐานที่แสดงให้เห็นถึงการใช้งานรูปแบบ selector:

1. การสร้าง Context

ขั้นแรก เรากำหนด Context ของเรา ลองจินตนาการถึง context สำหรับการจัดการโปรไฟล์ผู้ใช้และการตั้งค่าธีม

            import React, { createContext, useState, useContext } from 'react';

const AppContext = createContext({});

const AppProvider = ({ children }) => {
  const [user, setUser] = useState({
    name: 'John Doe',
    email: 'john.doe@example.com',
    location: 'New York'
  });
  const [theme, setTheme] = useState({
    primaryColor: '#007bff',
    secondaryColor: '#6c757d'
  });

  const updateUserName = (name) => {
    setUser(prevUser => ({ ...prevUser, name }));
  };

  const updateThemeColor = (primaryColor) => {
    setTheme(prevTheme => ({ ...prevTheme, primaryColor }));
  };

  const value = {
    user,
    theme,
    updateUserName,
    updateThemeColor
  };

  return (
    
      {children}
    
  );
};

export { AppContext, AppProvider };
            

              
                Copy
              
            
          

2. การสร้างฟังก์ชัน Selector

ถัดไป เรากำหนดฟังก์ชัน selector เพื่อดึงข้อมูลที่ต้องการจาก Context ตัวอย่างเช่น:

            const selectUserName = (context) => context.user.name;
const selectPrimaryColor = (context) => context.theme.primaryColor;

            

              
                Copy
              
            
          

3. การสร้าง Custom Hook (`useContextSelector`)

นี่คือหัวใจสำคัญของรูปแบบ selector hook `useContextSelector` รับฟังก์ชัน selector เป็นอินพุตและส่งกลับค่าที่เลือก นอกจากนี้ยังจัดการการสมัครรับข้อมูลไปยัง Context และทริกเกอร์การ re-render เฉพาะเมื่อค่าที่เลือกมีการเปลี่ยนแปลง

            import { useContext, useState, useEffect, useRef } from 'react';

const useContextSelector = (context, selector) => {
  const [selected, setSelected] = useState(() => selector(useContext(context)));
  const latestSelector = useRef(selector);
  const contextValue = useContext(context);

  useEffect(() => {
    latestSelector.current = selector;
  });

  useEffect(() => {
    const nextSelected = latestSelector.current(contextValue);
    if (!Object.is(selected, nextSelected)) {
      setSelected(nextSelected);
    }
  }, [contextValue]);

  return selected;
};

export default useContextSelector;

            

              
                Copy
              
            
          

คำอธิบาย:

• `useState`: เริ่มต้น `selected` ด้วยค่าเริ่มต้นที่ส่งกลับโดย selector
• `useRef`: จัดเก็บฟังก์ชัน `selector` ล่าสุด ทำให้มั่นใจได้ว่าจะใช้ selector ที่ทันสมัยที่สุดแม้ว่าคอมโพเนนต์จะ re-render
• `useContext`: รับค่า context ปัจจุบัน
• `useEffect`: เอฟเฟกต์นี้จะทำงานเมื่อใดก็ตามที่ `contextValue` เปลี่ยนแปลง ภายในนั้น จะคำนวณค่าที่เลือกใหม่โดยใช้ `latestSelector` หากค่าที่เลือกใหม่แตกต่างจากค่า `selected` ปัจจุบัน (โดยใช้ `Object.is` สำหรับการเปรียบเทียบอย่างละเอียด) สถานะ `selected` จะได้รับการอัปเดต ซึ่งจะทริกเกอร์การ re-render

4. การใช้ Context ในคอมโพเนนต์

ตอนนี้ คอมโพเนนต์สามารถใช้ hook `useContextSelector` เพื่อสมัครรับข้อมูลเฉพาะส่วนของ Context:

            import React from 'react';
import { AppContext, AppProvider } from './AppContext';
import useContextSelector from './useContextSelector';

const UserName = () => {
  const userName = useContextSelector(AppContext, selectUserName);

  return 
User Name: {userName}
;
};

const ThemeColorDisplay = () => {
  const primaryColor = useContextSelector(AppContext, selectPrimaryColor);

  return 
Theme Color: {primaryColor}
;
};

const App = () => {
  return (
    
      
      
    
  );
};

export default App;

            

              
                Copy
              
            
          

ในตัวอย่างนี้ `UserName` จะ re-render เฉพาะเมื่อชื่อผู้ใช้เปลี่ยนแปลง และ `ThemeColorDisplay` จะ re-render เฉพาะเมื่อสีหลักเปลี่ยนแปลง การแก้ไขอีเมลหรือตำแหน่งของผู้ใช้จะ *ไม่* ทำให้ `ThemeColorDisplay` re-render และในทางกลับกัน

ประโยชน์ของรูปแบบ Selector

• การ Re-render ที่ลดลง: ประโยชน์หลักคือการลดลงอย่างมากของการ re-render ที่ไม่จำเป็น ซึ่งนำไปสู่ประสิทธิภาพที่ดีขึ้น
• ประสิทธิภาพที่ดีขึ้น: โดยการลดการ re-render ให้เหลือน้อยที่สุด แอปพลิเคชันจะตอบสนองและมีประสิทธิภาพมากขึ้น
• ความชัดเจนของโค้ด: ฟังก์ชัน selector ส่งเสริมความชัดเจนและความสามารถในการบำรุงรักษาโค้ดโดยการกำหนด dependencies ของข้อมูลของคอมโพเนนต์อย่างชัดเจน
• การทดสอบ: ฟังก์ชัน selector เป็นฟังก์ชันบริสุทธิ์ ทำให้ง่ายต่อการทดสอบและให้เหตุผล

ข้อควรพิจารณาและการปรับปรุงประสิทธิภาพ

1. Memoization

Memoization สามารถปรับปรุงประสิทธิภาพของฟังก์ชัน selector ได้อีก หากค่า Context อินพุตไม่เปลี่ยนแปลง ฟังก์ชัน selector สามารถส่งกลับผลลัพธ์ที่แคชไว้ได้ หลีกเลี่ยงการคำนวณที่ไม่จำเป็น สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับฟังก์ชัน selector ที่ซับซ้อนซึ่งทำการคำนวณที่มีราคาแพง

คุณสามารถใช้ hook `useMemo` ภายใน implementation `useContextSelector` ของคุณเพื่อ memoize ค่าที่เลือก ซึ่งจะเพิ่ม optimization อีกชั้นหนึ่ง ป้องกันการ re-render ที่ไม่จำเป็นแม้ว่าค่า context จะเปลี่ยนแปลง แต่ค่าที่เลือกยังคงเหมือนเดิม นี่คือ `useContextSelector` ที่อัปเดตด้วย memoization:

            import { useContext, useState, useEffect, useRef, useMemo } from 'react';

const useContextSelector = (context, selector) => {
  const latestSelector = useRef(selector);
  const contextValue = useContext(context);

  useEffect(() => {
    latestSelector.current = selector;
  }, [selector]);

  const selected = useMemo(() => latestSelector.current(contextValue), [contextValue]);

  return selected;
};

export default useContextSelector;

            

              
                Copy
              
            
          

2. Object Immutability

การทำให้มั่นใจใน immutability ของค่า Context เป็นสิ่งสำคัญเพื่อให้รูปแบบ selector ทำงานได้อย่างถูกต้อง หากค่า Context ถูกเปลี่ยนแปลงโดยตรง ฟังก์ชัน selector อาจไม่ตรวจจับการเปลี่ยนแปลง ซึ่งนำไปสู่การ render ที่ไม่ถูกต้อง สร้างอ็อบเจ็กต์หรืออาร์เรย์ใหม่เสมอเมื่ออัปเดตค่า Context

3. Deep Comparisons

Hook `useContextSelector` ใช้ `Object.is` สำหรับการเปรียบเทียบค่าที่เลือก สิ่งนี้ทำการเปรียบเทียบแบบ shallow สำหรับอ็อบเจ็กต์ที่ซับซ้อน คุณอาจต้องใช้ฟังก์ชันเปรียบเทียบแบบ deep เพื่อตรวจจับการเปลี่ยนแปลงอย่างแม่นยำ อย่างไรก็ตาม การเปรียบเทียบแบบ deep อาจมีราคาแพงในการคำนวณ ดังนั้นให้ใช้ด้วยความระมัดระวัง

4. Alternatives to `Object.is`

When `Object.is` isn't sufficient (e.g., you have deeply nested objects in your context), consider alternatives. Libraries like `lodash` offer `_.isEqual` for deep comparisons, but be mindful of the performance impact. In some cases, structural sharing techniques using immutable data structures (like Immer) can be beneficial because they allow you to modify a nested object without mutating the original, and they can often be compared with `Object.is`.

5. `useCallback` for Selectors

The `selector` function itself can be a source of unnecessary re-renders if it's not properly memoized. Pass the `selector` function to `useCallback` to ensure that it's only recreated when its dependencies change. This prevents unnecessary updates to the custom hook.

            const UserName = () => {
  const userName = useContextSelector(AppContext, useCallback(selectUserName, []));

  return 
User Name: {userName}
;
};

            

              
                Copy
              
            
          

6. Using Libraries Like `use-context-selector`

Libraries like `use-context-selector` provide a pre-built `useContextSelector` hook that is optimized for performance and includes features like shallow comparison. Using such libraries can simplify your code and reduce the risk of introducing errors.

            import { useContextSelector } from 'use-context-selector';
import { AppContext } from './AppContext';

const UserName = () => {
  const userName = useContextSelector(AppContext, selectUserName);

  return 
User Name: {userName}
;
};

            

              
                Copy
              
            
          

ตัวอย่าง Global และแนวทางปฏิบัติที่ดีที่สุด

รูปแบบ selector สามารถใช้งานได้ในกรณีการใช้งานต่างๆ ในแอปพลิเคชัน global:

• Localization: Imagine an e-commerce platform that supports multiple languages. The Context could hold the current locale and translations. Components displaying text can use selectors to extract the relevant translation for the current locale.
• Theme Management: A social media application can allow users to customize the theme. The Context can store the theme settings, and components displaying UI elements can use selectors to extract the relevant theme properties (e.g., colors, fonts).
• Authentication: A global enterprise application can use Context to manage user authentication status and permissions. Components can use selectors to determine whether the current user has access to specific features.
• Data Fetching Status: Many applications display loading states. A context could manage the status of API calls, and components can selectively subscribe to the loading state of specific endpoints. For example, a component displaying a user profile might only subscribe to the loading state of the `GET /user/:id` endpoint.

เทคนิคการปรับปรุงประสิทธิภาพทางเลือก

แม้ว่ารูปแบบ selector จะเป็นเทคนิคการปรับปรุงประสิทธิภาพที่มีประสิทธิภาพ แต่ก็ไม่ใช่เครื่องมือเดียวที่มีให้ พิจารณาทางเลือกเหล่านี้:

• `React.memo`: ห่อคอมโพเนนต์ฟังก์ชันด้วย `React.memo` เพื่อป้องกันการ re-render เมื่อ props ไม่เปลี่ยนแปลง สิ่งนี้มีประโยชน์สำหรับการปรับปรุงประสิทธิภาพของคอมโพเนนต์ที่ได้รับ props โดยตรง
• `PureComponent`: ใช้ `PureComponent` สำหรับคอมโพเนนต์ class เพื่อทำการเปรียบเทียบ props และ state แบบ shallow ก่อนที่จะ re-render
• Code Splitting: แบ่งแอปพลิเคชันออกเป็นส่วนย่อยๆ ที่สามารถโหลดได้ตามต้องการ สิ่งนี้จะช่วยลดเวลาในการโหลดเริ่มต้นและปรับปรุงประสิทธิภาพโดยรวม
• Virtualization: สำหรับการแสดงรายการข้อมูลขนาดใหญ่ ให้ใช้เทคนิค virtualization เพื่อ render เฉพาะรายการที่มองเห็นได้ สิ่งนี้จะช่วยปรับปรุงประสิทธิภาพอย่างมากเมื่อต้องจัดการกับชุดข้อมูลขนาดใหญ่

สรุป

รูปแบบ selector เป็นเทคนิคที่มีค่าสำหรับการปรับปรุงประสิทธิภาพ React Context โดยการลดการ re-render ที่ไม่จำเป็น โดยการอนุญาตให้คอมโพเนนต์สมัครรับข้อมูลเฉพาะส่วนของค่า Context ที่ต้องการ จะช่วยปรับปรุงการตอบสนองและประสิทธิภาพของแอปพลิเคชัน โดยการรวมเข้ากับเทคนิคการปรับปรุงประสิทธิภาพอื่นๆ เช่น memoization และ code splitting คุณสามารถสร้างแอปพลิเคชัน React ที่มีประสิทธิภาพสูงซึ่งมอบประสบการณ์การใช้งานที่ราบรื่น อย่าลืมเลือกกลยุทธ์การปรับปรุงประสิทธิภาพที่เหมาะสมตามความต้องการเฉพาะของแอปพลิเคชันของคุณและพิจารณา trade-offs ที่เกี่ยวข้องอย่างรอบคอบ

บทความนี้ได้ให้คำแนะนำที่ครอบคลุมเกี่ยวกับรูปแบบ selector รวมถึง implementation ประโยชน์ และข้อควรพิจารณา โดยการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดที่ระบุไว้ในบทความนี้ คุณสามารถปรับปรุงประสิทธิภาพการใช้งาน React Context ของคุณได้อย่างมีประสิทธิภาพและสร้างแอปพลิเคชันที่มีประสิทธิภาพสำหรับผู้ชม global